<template>
  <div class="draggable-table-container">
    <div class="draggable-table__header">
      <div class="header-drag"></div>
      <div class="header-content">布局</div>
    </div>
    <draggable
      :list="props.grid"
      item-key="index"
      group="row"
      handle=".mover"
      animation="500"
    >
      <template #item="row">
        <div class="layout-row__wrapper">
          <div class="row-drag mover"><HolderOutlined /></div>
          <div class="row-content">
            <draggable
              class="layout-column__wrapper"
              :list="row.element.columns"
              item-key="label"
              group="tag"
              handle=".mover"
              animation="500"
            >
              <template #item="column">
                <a-tag color="blue" :style="getColumnItemStyle(column.element)">
                  <div class="column-item__drag mover"><HolderOutlined /></div>
                  <div class="column-item__label">{{column.element.label}}</div>
                  <div class="column-item__span">
                    <a-input-number
                      v-model:value="column.element.span"
                      :controls="false"
                      size="small"
                      :min="1"
                      :max="24"
                    />
                  </div>
                </a-tag>
              </template>
            </draggable>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
	import { ref, defineProps } from 'vue';

	import draggable from 'vuedraggable'

	import {HolderOutlined} from '@ant-design/icons-vue'

	const props = defineProps({
    grid: {
			type: Array,
			required: false,
			default: function() { return [] }
		}
	})

	const columns = [
		{ title: '', dataIndex: 'drag', width: 30 },
		{ title: '布局', dataIndex: 'label', align: 'center' },
	]

  const getColumnItemStyle = (val) => {
		return {
			minWidth: `calc(${(val.span / 24 * 100) + '%'} - 6px)`,
			maxWidth: `calc(${(val.span / 24 * 100) + '%'} - 6px)`,
			width: (val.span / 24 * 100) + '%'
    }
  }

</script>

<style scoped lang="scss">
  :deep(.table-striped) td {
    background-color: #fafafa;
  }

  .draggable-table__header {
    width: 100%;
    height: 57px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fafafa;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;

    .header-drag {
      width: 30px;
      cursor: grab;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      border-right: 1px solid #f0f0f0;
    }

    .header-content {
      flex: 1 0 0;
      color: rgba(0, 0, 0, 0.88);
      font-weight: 600;
      padding: 12px;
    }
  }

  .layout-row__wrapper {
    width: 100%;
    min-height: 57px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;

    &:last-of-type {
      border-bottom: 1px solid #f0f0f0;
    }
  }

  .row-drag {
    width: 30px;
    cursor: grab;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-right: 1px solid #f0f0f0;
  }

  .row-content {
    flex: 1 0 0;
    padding: 8px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .layout-column__wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    :deep(.ant-tag) {
      height: 36px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex: 1 0 0;
      margin-right: 0;

      .column-item__drag {
        border-right: 1px solid #91caff;
        padding-right: 7px;
        cursor: grab;
        font-size: 12px;
      }

      .column-item__label {
        flex: 1 0 0;
        border-right: 1px solid #91caff;
        overflow: hidden;
        margin-left: 8px;
      }

      .column-item__span {
        margin-left: 8px;
      }

      .ant-input-number {
        width: 32px;
      }
    }
  }
</style>
